<template>
  <el-col :span="24">
    <el-col :span="3" class="fileTree">
      <el-tree
        :data="deviceBasic.historyInfo"
        :props="defaultProps"
        accordion
        @node-click="handleNodeClick"
      >
      </el-tree>
    </el-col>
  <el-col :span="21" class="fileReview" v-if="docType!='img'">
    <sticky >
    <div class="tools">
			<el-button  @click="prePage"> 上一页</el-button>
      <span class="page">{{pdfParams.pageNum}}/{{pdfParams.pageTotalNum}} </span>
			<el-button  @click="nextPage"> 下一页</el-button>
			
		
		</div>
    </sticky>
      <!-- <img src="https://panjiachen.gitee.io/vue-element-admin/static/img/404.a57b6f31.png"> -->
      <pdf ref="pdf" 
		:src="pdfParams.url" 
		:page="pdfParams.pageNum"
     
      :rotate="pdfParams.pageRotate"  
		@progress="pdfParams.loadedRatio = $event"
		@page-loaded="pageLoaded($event)" 
		@num-pages="pdfParams.pageTotalNum=$event" 
		@error="pdfError($event)" 
		@link-clicked="page = $event"
      ></pdf>
  </el-col> 
   <el-col :span="21" class="fileReview" v-if="docType=='img'">
     <img :src="pdfParams.url">
   </el-col>  
  </el-col>
</template>


<script>
import pdf from 'vue-pdf'
import Sticky from 'vue-sticky-position'
import { mapState, mapMutations } from "vuex";
export default {
  props:["dataModel"],
   components:{pdf,Sticky},
  data() {
    return {
      docType:"pdf",
      pdfParams:{
        pageNum:1,
     url:"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
     numPages:1,
     pageTotalNum: 1,
				pageRotate: 0,
				// 加载进度
				loadedRatio: 0,
				curPageNum: 0,
     },
     
      data: this.dataModel.histroyShowInfo,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created:async function(){
        const dataKey=this.$route.fullPath
        const id=localStorage.getItem(dataKey)
      
    await this.$store.dispatch("deviceBasic/historyInfo",id)

  },
  mounted: function() {
    console.log(this.$store.state.deviceBasic)
		  this.getNumPages(this.pdfParams.url)
		  
    },
       computed: {
    ...mapState(["deviceBasic"]),
    },
  methods: {
    //获取分页总数
   async getNumPages(url) {
        var loadingTask =await pdf.createLoadingTask(url)
        
				loadingTask.then(pdf => {
					this.pdfParams.url = loadingTask
					this.pdfParams.numPages = pdf.numPages
				}).catch((err) => {
					console.error('pdf加载失败')
				})
      },
    // 上一页函数，
			prePage() {
				var page = this.pdfParams.pageNum
				page = page > 1 ? page - 1 : this.pdfParams.pageTotalNum
				this.pdfParams.pageNum = page
			},
            // 下一页函数
			nextPage() {
				var page = this.pdfParams.pageNum
				page = page < this.pdfParams.pageTotalNum ? page + 1 : 1
				this.pdfParams.pageNum = page
			},
           
      // 页面加载回调函数，其中e为当前页数
			pageLoaded(e) {
				this.pdfParams.curPageNum = e
			},
            // 其他的一些回调函数。
			pdfError(error) {
				console.error(error)
			},
    handleNodeClick(data) {
      console.log(data);
      if(data.children){
             //父节点不处理 
      }else{
      this.docType=data.type
      this.pdfParams.url=data.imgSrc
      }
      
    },
  },
};
</script>
<style lang="scss">
.fileTree{
    height:100%
}
.fileReview{
    border:5px solid #F5F6FA;
}
.tools{
  text-align: center;
  margin: 20px;
}
</style>